<template>
	<view class="content">
		<view class="addres">
			<view class="addres_name">
				<view class="">{{address.userName}}</view>
				<view class="">{{address.telNumber}}</view>
			</view>
			<view class="addres_title">
				{{address.cityName}}{{address.countyName}}{{address.detailInfo}}
			</view>
		</view>
		<!--  -->
		<view class="cart">
			<view class="cart_title">
				购物车
			</view>
		</view>
		<!--  -->
		<view class="content_top" >
			<view class="shop_item" v-for="item in shopList">
			
				<view class="shop_image">
					<image :src="item.goods_small_logo" mode="widthFix"></image>
				</view>
				<view class="shop_name">
					<view class="name">{{item.goods_name}}</view>
					<view class="shop_grop">
						<view class="price">￥{{item.goods_price}}</view>
						<view class="shop_num">
							<view class="shop_num_num">X {{item.num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="content_btn">
			<view class="total">
				<view>合计:￥{{totalPrice}}</view>
				<text>包运费</text>
			</view>
			<view class="shop_add">
				<view class="alladd" @click="handPay()">
					支付（{{totalNum}}）
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopList:[],
				totalPrice:0,
				totalNum:0,
				address:""
			}
		},
		onShow() {

			const address=uni.getStorageSync('address')||[]
			let shopList=uni.getStorageSync('cart')||[]
			this.shopList=shopList
			this.address=address
			//计算全选
			// const allCheck=shopList.length?shopList.every(v=>v.isCheck):false
			 shopList=shopList.filter(v=>v.isCheck);

			
			let totalPrice=0;
			let totalNum=0;
			shopList.forEach(v=>{
					totalPrice+=v.num*v.goods_price;
					totalNum+=v.num;
				
			})
			this.shopList=shopList;
			this.totalPrice=totalPrice;
			this.totalNum=totalNum;
		},
		methods: {
			handPay(){
				//生成n位数字字符串
				  var res = "";
				  for(var i=0;i<10;i++){
				   res += Math.floor(Math.random()*10);
				   }
				if(this.shopList.length!=0){
					uni.showToast({
						icon:'success',
						title:'支付成功',
					})
					// 拿到数据
					let info=uni.getStorageSync('allOrder')||[]
					this.shopList.id=res
					info.push(this.shopList)
					uni.setStorageSync('order',info)
					// 清空购物车
					uni.setStorageSync('cart','')
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/order/order?page=0'
						})
					},1000)
				}else{
					uni.showToast({
						icon:'none',
						title:'你还没有选购商品',
					})
				}
			}
		}
	}
</script>

<style lang="scss">
   .addres{
	   height: 90rpx;
	   width: 100%;
	   border: 5rpx solid #eee;
	   .addres_name{
		   display: flex;
		   justify-content: space-between;
		    padding: 0rpx 20rpx;
	   }
	   .addres_title{
		   padding-left: 20rpx;
	   }
   }
   // 
   .cart{
	   height: 80rpx;
	   width: 100%;
	    border: 5rpx solid #eee;
	   .cart_title{
		   line-height: 80rpx;
		   padding-left: 20rpx;
		   font-size: 35rpx;
		   font-weight: bold;
	   }
   }
   .content_top{
	   margin-bottom: 120rpx;
   }
   .shop_item{
   	   margin-top: 5rpx;
   	   height: 250rpx;
   	   display: flex;
   	   border-bottom: 1px solid gainsboro;
   	   .check{
   		    padding-left: 10rpx;
   		   display: flex;
   		   align-items: center;
   		   flex: 1;
   	   }
   	   .shop_image{
		   padding-left: 20rpx;
   		  display: flex;
   		  align-items: center;
   		   flex: 2;
   		   image{
   			   border-radius: 20rpx;
   			   width: 100%;
   		   }
   	   }
   	   .shop_name{
   		   display: flex;
   		   flex-direction: column;
   		   justify-content: space-between;
   		   .shop_grop{
   			   display: flex;
   			   flex-direction: row;
   			   justify-content: space-between;
   		   }
   		   .name{
   			   padding: 0rpx 10rpx;
   			   display: -webkit-box;
   			   overflow: hidden;
   			   -webkit-box-orient:vertical;
   			   -webkit-line-clamp:2;
   		   }
   		   .price{
   			   font-size: 35rpx;
   			   color: $shop-color;
   			   font-weight: bold;
   		   }
   		   .shop_num{
   			   width: 150rpx;
   			   display: flex;
   			   justify-content: space-around;
   			   align-items: center;
   			   margin-right: 20rpx;
   		   }
   		   .shop_num_deti{
   			   width: 45rpx;
   			   height: 45rpx;
   			   line-height: 45rpx;
   			   text-align: center;
   			   border: 1rpx solid gray;
   		   }
   		   flex: 4;
   	   }
   	   
   }
   .content_btn{
   	   position: fixed;  
   	   bottom: 0;
   	   width: 100%;
   	   left: 0;
   	   height: 90rpx;
   	   display: flex;
   	   border-top: 1rpx solid gainsboro;
	   background-color: #fff;
   	   .total{
   		   text{
   			   font-size: 20rpx;
   			   color:gray;
   		   }
   		   view{
   			   color: $shop-color;
   		   }
   		   display: flex;
   		   flex-direction: column;
   		   align-items: center;
   		   flex: 3;
   	   }
   	   .shop_add{
   		   display: flex;
   		   justify-content: center;
   		   color: #fff;
   		   align-items: center;
   		   background-color: red;
   		   flex: 2;
   	   }
   }
</style>
